<template>
  <div id="notificatio-bar-message" ref="notificatio">
    <p class="title">通知栏消息</p>
    <div class="content_wrap ml10" :style="{height: height}">
      <el-main>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" size="small" label-width="100px" class="demo-ruleForm">
          <!-- -------- 推送内容 -------- -->
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <h2>推送内容</h2>
            </div>
            <div class="content">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="推送平台">
                    {{ruleForm.platform}}
                  </el-form-item>
                  <el-form-item label="通知标题" prop="title">
                    <el-input v-model="ruleForm.title" placeholder="请填写通知标题"></el-input>
                  </el-form-item>
                  <el-form-item v-show="ruleForm.platform === 'ios'" label="副标题" prop="subtitle">
                    <el-input placeholder="请填写副标题，仅支持iOS10以上" v-model="ruleForm.subtitle"></el-input>
                  </el-form-item>
                  <el-form-item label="通知内容" prop="content">
                    <el-input v-model="ruleForm.content" type="textarea" :autosize="{ minRows: 10, maxRows: 10}" placeholder="请填写通知内容，字数在200个字以内"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="10" :offset="2" class="imagebox">
                  <span class="textandroid">{{ this.ruleForm.title }}</span>
                  <span class="textios">{{ this.ruleForm.content }}</span>
                  <div v-if="ruleForm.platform === 'android'" class="image"><img src="../../../../images/mobile-bg.png" alt=""></div>
                  <div v-else class="image"><img src="../../../../images/mobile-ios-bg.png" alt=""></div>
                </el-col>
              </el-row>
            </div>
          </el-card>
          <!-- -------- 常用设置 -------- -->
          <el-card class="box-card">
            <div slot="header"><h2>常用设置</h2></div>
            <div class="content">
              <el-form-item label="推送证书" v-show="ruleForm.platform === 'ios'">
                <el-radio-group v-model="ruleForm.environment">
                  <el-radio-button label="dev">开发证书</el-radio-button>
                  <el-radio-button label="product">生产证书</el-radio-button>
                </el-radio-group>
              </el-form-item>

              <el-form-item label="推送时间">
                <el-radio-group v-model="ruleForm.send_time">
                  <el-radio-button v-for="item in send_time_arr" :key="item.index" :label="item.label">{{item.name}}</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-if="ruleForm.send_time === 'ds'">
                  <template>
                    <div class="block">
                      <el-date-picker
                        v-model="ruleForm.timer"
                        type="date"
                        @change="dataChoice"
                        placeholder="选择日期"
                        :picker-options="ruleForm.pickerOptions1">
                      </el-date-picker>
                      <el-time-picker
                        v-model="ruleForm.value4"
                        placeholder="选择时间点"
                        @change="TimeChoice"
                        value-format="HH:mm:ss"
                        format="HH:mm:ss">
                      </el-time-picker>
                    </div>
                  </template>
              </el-form-item>
              <el-form-item v-else-if="ruleForm.send_time === 'xh'">
                <el-date-picker
                    v-model="ruleForm.date_area"
                    type="daterange"
                    @change="dataChoiceone"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="ruleForm.pickerOptions2">
                </el-date-picker>
                <el-time-picker
                    @change="cyclictime"
                    v-model="ruleForm.cyclic_time"
                    placeholder="任意时间点"
                    value-format="HH:mm:ss"
                    format="HH:mm:ss">
                  </el-time-picker>
                <el-select v-model="ruleForm.cyclic_target" @change="targetChang" placeholder="推送目标">
                  <el-option label="每天一次" value="1"></el-option>
                  <el-option label="每周今天一次" value="2"></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="推送目标">
                <el-radio-group v-model="ruleForm.audience_type">
                  <el-radio-button label="all">全部用户</el-radio-button>
                  <el-radio-button label="des_user">特定用户</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <template>
                <el-form-item v-if="ruleForm.audience_type === 'all'">
                  <i class="el-icon-warning"></i><span class="i-span">将对所有设备进行推送，请谨慎选择</span>
                </el-form-item>
                <el-form-item v-else>
                  <el-select placeholder="请选择特定用户" v-model="ruleForm.user"
                  @change="especiallyUser">
                    <el-option v-for="item in userArr" :key="item.index" :label="item.label" :value="item.value"></el-option>
                  </el-select>
                  <!-- <el-input v-if="ruleForm.user === 'token'" placeholder="请填写设备 Device Token, 字符长度为40" v-model="ruleForm.usertoken"></el-input> -->
                  <el-input v-if="ruleForm.user === 'account'" placeholder="即APP帐号体系，例如单个QQ号、微信号、邮箱、手机、ID等" v-model="ruleForm.useraccount"></el-input>
                  <el-input type="textarea" v-else-if="ruleForm.user === 'account_list'" autosize placeholder="即APP帐号体系，例如'account1','account2',使用英文','分隔" v-model="ruleForm.useraccountlList" @change="accountlistChange" style="width:500px"></el-input>
                  <!-- <el-input v-else-if="ruleForm.user === 'token'" placeholder="请填写设备 Device Token, 字符长度为40" v-model="ruleForm.usertoken"></el-input> -->
                  <!-- <template v-else-if="ruleForm.user === 'tag'">
                    <el-select v-model="ruleForm.tag_item" filterable placeholder="请选择推送的自定义标签" @change="tagitemChang">
                      <el-option v-for="(item, index) in optionsbar" :key="index" :label="item" :value="index">
                      </el-option>
                    </el-select>
                  </template> -->
                  <!-- <el-input type="textarea" v-else-if="ruleForm.user === 'token_list'" autosize placeholder="请填写多个设备号例如token1,token2,使用英文','分隔" v-model="ruleForm.usertokenList" @change="tokenlistChange" style="width:500px"></el-input> -->
                <!-- 设备属性 -->
                <template v-else-if="ruleForm.user === 'tag'">
                    <el-select placeholder="请选择属性分类" v-model="ruleForm.Classification"  @change="attributeClassification">
                      <el-option
                          v-for="item in optionsone"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>
                    <el-select filterable placeholder="请选择推送的预设标签"
                    v-model="ruleForm.presetValuebar"  @change="presetValue">
                      <el-option
                          v-for="item in optionstwo"
                          :key="item.value"
                          :label="item.name"
                          :value="item.value">
                      </el-option>
                    </el-select>
                </template>
                </el-form-item>
              </template>
              <el-form-item label="应用数据同步">
                <el-switch
                    v-model="ruleForm.params"
                    active-color="#0670DD"
                    inactive-color="#606870">
                </el-switch>
              </el-form-item>
              <el-form-item v-show="ruleForm.params" v-for="(item, index) in addParamsArr" :key="index">
                <el-input class="params-input" placeholder="Key" v-model="item.key" @change="paramsKey"></el-input>
                <el-input class="params-input" placeholder="Value" v-model="item.value" @change="paramsValue"></el-input>
                <!-- <i class="iconfont icon-add" @click="handleAdd"></i>
                <i class="iconfont icon-close" v-show="addParamsArr.length > 1" @click="handleSubtract(index)"></i> -->
              </el-form-item>
              <el-form-item label="角标数字" v-show="ruleForm.platform === 'ios'" prop="value8">
                <el-radio-group v-model='ruleForm.badge_type' @change="badgetypeChange">
                  <el-radio-button label="-1">不变</el-radio-button>
                  <el-radio-button label="1">设置为</el-radio-button>
                  <el-radio-button label="-2">自动加1</el-radio-button>
                </el-radio-group>
                <el-input placeholder="推荐填写大于或等于0的整数" v-model="ruleForm.value8" v-show="ruleForm.badge_type === '1'" style="display:block;width:250px;margin-top:20px" @change="value8change"></el-input>
              </el-form-item>

              <el-form-item label="富媒体内容">
                <el-switch
                    v-model="ruleForm.isOpenMedia"
                    active-color="#0670DD"
                    inactive-color="#606870">
                </el-switch>
              </el-form-item>
              <el-form-item v-show="ruleForm.isOpenMedia">
                <el-input v-model="ruleForm.xg_media_resources" placeholder="请填写富媒体文件链接，仅支持https协议"></el-input>
                <el-tooltip placement="right">
                  <p slot="content">
                    带有富媒体的消息将只通过信鸽通道进行下发。<br>
                    Android原生系统包含大图和缩略两种形式，<br>
                    具体的展现效果根据机型和定制系统可能有一定的差异。<br>
                    1. Android系统只支持静态图片作为富媒体内容br <br>
                    2. 图片的分辨率大小要求为430*230</p>
                  <i class="el-icon-warning"></i>
                </el-tooltip>
              </el-form-item>
            </div>
          </el-card>
          <!-- ----------iOS的高级设置------------ -->
          <el-card class="box-card" v-if="ruleForm.platform === 'ios'">
            <div slot="header"><h2>高级设置</h2></div>
            <div class="content">
              <el-form-item label="通知音效">
                <el-radio-group v-model="ruleForm.tent" @change="expiregChange">
                  <el-radio-button label="yy">默认音效</el-radio-button>
                  <el-radio-button label="ym">自定义</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item style="width:280px;margin-top:20px" v-show="ruleForm.tent === 'ym'">
                <el-input placeholder="请填写自定义音效名称，例如：beep.wav" v-model="ruleForm.cehold" style="width:360px"></el-input>
              </el-form-item>
              <el-form-item label="category" style="width:280px;margin-top:20px">
                <el-input placeholder="请填写 iOS 通知 category" v-model="ruleForm.expiregory" style="width:360px"></el-input>
              </el-form-item>
              <el-form-item label="静默通知" v-if="ruleForm.showparamstiper">
                <el-switch
                    v-model="ruleForm.paramsone"
                    active-color="#0670DD"
                    inactive-color="#606870"
                    @change="paramsoneChang">
                </el-switch>
              </el-form-item>
              <span v-if="ruleForm.showparamsbar"><span style="margin-left:32px">mutable-content</span>
                <el-switch
                    v-model="ruleForm.paramstwo"
                    active-color="#0670DD"
                    inactive-color="#606870"
                    style="margin-left:15px"
                     @change="paramstwoChang">
                </el-switch>
              </span>
            </div>
          </el-card>
          <!-- ------- 高级设置 -------- -->
          <el-card class="box-card" v-else>
            <div slot="header"><h2>高级设置</h2></div>
            <div class="content">
              <el-form-item label="离线保存">
                <el-row :gutter="10">
                  <el-col :span="2">
                    <el-input v-model="ruleForm.expire_time"></el-input>
                  </el-col>
                  <el-col :span="12">
                    保存 {{ruleForm.expire_time}} 小时, 该时段内联网的用户均可收到推送
                  </el-col>
                </el-row>
              </el-form-item>
              <el-form-item label="点击打开">
                <el-radio-group v-model="ruleForm.open" @change="mainActivity">
                  <el-radio-button v-for="item in activeOpenArr" :key="item.index" :label="item.label">{{item.name}}</el-radio-button>
                </el-radio-group>
              </el-form-item>
              <el-form-item v-if="ruleForm.open === 'ym'">
                <el-input placeholder="请填写应用页面activity地址，例如：com.tencent.xgpushdemo.MainActivity" v-model="ruleForm.pushdemo"></el-input>
              </el-form-item>
              <el-form-item v-else-if="ruleForm.open === 'url'">
                <el-input placeholder="请填写URL，如http://mta.qq.com" v-model="ruleForm.urlonent"></el-input>
              </el-form-item>
              <el-form-item v-else-if="ruleForm.open === 'zdy'">
                <el-input placeholder="请填写intent参数，例如：action.intent = “intent:#Intent;component=com.qq.xg4all/com.qq.xg4all.HelpActivity;end”" v-model="ruleForm.comintent"></el-input>
              </el-form-item>
              <el-form-item label="提醒方式">
                <el-checkbox v-model="ruleForm.ring" true-label="1" false-label="0" @change="ringChang">声音</el-checkbox>
                <el-checkbox v-model="ruleForm.vibrate" true-label="1" false-label="0">震动</el-checkbox>
                <el-checkbox v-model="ruleForm.lights" true-label="1" false-label="0">呼吸灯</el-checkbox>
                <br>
                <template v-if="ruleForm.showRadio">
                  <el-radio v-model="ruleForm.radio" label="mr">默认声音</el-radio> <br>
                  <el-radio v-model="ruleForm.radio" label="zdy">自定义</el-radio>
                  <el-input v-show="ruleForm.radio === 'zdy'" v-model="ruleForm.ring_raw" placeholder="位于raw目录下的铃声文件（不需要后缀），例如：xg_"></el-input>
                </template>
              </el-form-item>
              <!-- <el-form-item label="多包名推送">
                <el-switch
                    v-model="ruleForm.multi_pkg"
                    active-color="#0670DD"
                    inactive-color="#606870">
                </el-switch>
              </el-form-item> -->
            </div>
          </el-card>
        </el-form>
      </el-main>
        <div style="padding-bottom:40px;padding-left:50%;margin-left:-17px;background:#ffffff;padding-top:25px">
        <!-- <el-button type="primary" size="mini">在线测试</el-button> -->
        <el-button type="primary" @click="handleChangeOpen" size="mini">确定推送</el-button>
        </div>
    </div>
    <!-- ------------ 下面放弹框 -------------- -->
    <el-dialog title="推送明细" :visible.sync="dialogPushVisible" width="600px">
      <el-main>
        <el-row>
          <el-col :span="4" :offset="1">
            <span>通知标题：</span>
          </el-col>
          <el-col :span="18">
            <span>{{ruleForm.title}}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" :offset="1">
            <span>通知内容：</span>
          </el-col>
          <el-col :span="18">
            <span>{{ruleForm.content}}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" :offset="1">
            <span>推送时间：</span>
          </el-col>
          <el-col :span="18">
            <span v-if="ruleForm.send_time === 'lj'">{{'立即'}}</span>
            <span v-if="ruleForm.send_time === 'ds'">{{'定时' + ',' + this.ruleForm.newdamitimer}}</span>
            <span v-if="ruleForm.send_time === 'xh'">{{'循环' + ',' + this.ruleForm.timerone + '-' + this.ruleForm.timertwo + ' ' + this.ruleForm.cyclic_time + ', ' + this.ruleForm.selector}}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" :offset="1">
            <span>推送目标：</span>
          </el-col>
          <el-col :span="18">
            <span v-if="ruleForm.audience_type === 'all'">全部用户</span>
            <span v-else>特定用户， {{ this.ruleForm.esyuser }}</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="4" :offset="1">
            <span>离线保存：</span>
          </el-col>
          <el-col :span="18">
            <span>{{ruleForm.expire_time}}</span>
          </el-col>
        </el-row>
      </el-main>
      <template slot="footer" class="dialog-footer">
        <el-button @click="dialogPushVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script type="text/ecmascript-6">
  import api from '../../../../api/url'
  import ajax from '../../../../api/ajax/mobilePushAjax'
  import { mapGetters } from 'vuex'
  import { Base64 } from 'js-base64'
  import { nextPage, getDateTime } from '../../../../assets/js/index'
  export default {
    name: 'notificatio-bar-message',
    data () {
      return {
        dialogPushVisible: false,
        ruleForm: {
          platform: '',
          title: '', // 通知标题
          content: '', // 通知内容
          subtitle: '', // 副标题
          send_time: 'lj', // 推送时间 yyyy-MM-DD HH:MM:SS
          timer: '', // 选择日期时间
          newtimer: '', // 时间格式化选择日期时间
          mitimer: '', // 选择日期时间
          tent: 'yy', // ios的音效控制
          soundeffects: 'default', // 声音音效值
          newdamitimer: '', // 日期时间合成
          loop_interval: '', // 循环的间隔
          loop_times: '', // 循环
          date_area: '', // 选择循环日期
          cyclic_time: '', // 选择循环时间
          frequency: '', // 循环的次数
          fristonetime: '', // 取循环的第一个时间
          cyclic_target: '', // 推送循环目标
          expire_time: '24', // 离线保存
          open: 'yy', // 点击打开附加参数
          audience_type: 'all', //
          user: '', // 特定用户
          useraccountlList: '', // 批量账号推送
          useraccountlListbar: '', // 批量账号推送接收数据
          differencevalue: '', // 时间差值
          Classification: '', // 设备属性的值
          presetValuebar: '', // 属性预设值
          dartype: '', // 设置预设标签
          params: false, // 附件参数
          paramsone: false, // ios的通知
          paramstwo: false, // ios的通知
          showparamsbar: true, // 是否显示ios的音效
          showparamstiper: true, // 是否显示ios的音效
          contvailable: '', // 默认音效默认值1
          isOpenMedia: false, // 是否打开富媒体
          xg_media_resources: '', // 富媒体内容
          ring: '1', // 是否有铃声 0-没有，1-有（默认）
          radio: 'mr', // 默认声音
          showRadio: false, // 点击声音控制声音选择的隐藏显示
          ring_raw: '', // 铃声文件名-不需要后缀
          vibrate: '1', // 是否需要震动 0-没有，1-有（默认）
          lights: '1', // 是否需要呼吸灯 0-不用，1-用（默认）
          // multi_pkg: false, // 多包名推送
          openreleaseo: 1, // 点击页面打开的方式
          pushdemo: '', // 应用页面类容
          urlonent: '', // 打开app的url的地址
          comintent: '', // 特定用户打开的自定义
          useraccount: '', // 账号内容
          usertoken: '', // 单token输入框
          usertokenList: '', // 设备群推
          // usertokenListbar: '', // 设备群推接收
          value4: '', // 定时的时间值
          environment: 'product', // 用户指定的推送环境--iOS专用（默认product）
          badge_type: '-1', // 用户设置角标数字 -1：不变 -2：加1 >=0：自定义
          badge_typebar: '-1',
          timerone: '', // 时间格式化选择日期时间1
          timertwo: '', // 时间格式化选择日期时间2
          selector: '', // 循环下拉翻译
          userment: '', // 群推单推翻译
          esyuser: '', // 弹框里的推送目标翻译
          darancms: {}, // 推送的参数
          objcbar: {}, // 应用数据同步
          value8: '', // 角标设置参数
          cehold: '', // ios的自定义音效
          expiregory: '', // ios的默认音效
          newgory: '', // 自定义的键
          homsbar: '', // 定时的禁止
          newvalue: '', // 键值对的值
          tagvaluebar: '', // 选中的标签
          pickerOptions1: { // 推送禁止定时时间
            disabledDate (time) {
               return time.getTime() < Date.now() - 8.64e7
            }
          },
          pickerOptions2: { // 推送禁止时间
            disabledDate (time) {
              return time.getTime() < Date.now() - 8.64e7 || time.getTime() > (Date.now() - 8.64e7) + 14 * 24 * 60 * 60 * 1000
            }
          }
        },
        rules: {
          title: [{ required: true, message: '请输入通知标题', trigger: 'blur' }],
          content: [{ required: true, message: '请输入通知内容', trigger: 'blur' }]
         // value8: [{ validator: numgreaterThan, trigger: 'blur' }]
        },
        send_time_arr: [{label: 'lj', name: '立即'}, {label: 'ds', name: '定时'}, {label: 'xh', name: '循环'}],
        userArr: [
          {label: '全部用户', value: 'all'},
          {label: '单账号推送', value: 'account'},
          {label: '账号列表推送', value: 'account_list'},
          // {label: '单个Token推送', value: 'token'},
          // {label: 'Token列表群推', value: 'token_list'},
         // {label: '自定义标签', value: 'tag'},
          {label: '设备属性', value: 'tag'}
        ],
        activeOpenArr: [{label: 'yy', name: '应用'}, {label: 'ym', name: '应用面页面'}, {label: 'url', name: 'URL'}, {label: 'zdy', name: '客户端自定义'}],
        addParamsArr: [{key: '', value: ''}],
        fileList: [],
        optionsone: [],
        optionstwo: [],
        optionsbar: [], // 标签的值
        height: null
      }
    },
    computed: {
      ...mapGetters(['v3AppTitle', 'v3AppKey', 'v3SecretKey', 'v3platform'])
    },
    methods: {
      // 属性分类
      attributeClassification () {
        console.log('8956', this.ruleForm.Classification)
        if (this.ruleForm.Classification === 'ad') {
          this.ruleForm.dartype = 'xg_auto_systemversion'
        } else if (this.ruleForm.Classification === 'appba') {
          this.ruleForm.dartype = 'xg_auto_version'
        } else if (this.ruleForm.Classification === 'bqdy') {
          this.ruleForm.dartype = 'xg_user_define'
          } else {
           this.ruleForm.dartype = 'xg_auto_systemlanguage'
        }
          let hbar = {
          Authorization: 'Basic' + ' ' + Base64.encode(this.v3AppKey + ':' + this.v3SecretKey),
          'Content-Type': 'application/json'
          }
            // 查询预设标签
            let darancms = {
              start: 0,
              limit: 100,
              type: this.ruleForm.dartype
            }
          ajax.post(api.PRESET_TAG_QUERY, darancms, hbar).then(res => {
          if (res.err_msg === 'OK' && res.ret_code === 0) {
                 console.log('res000===', res)
               this.optionstwo = res.result.list
           }
          }).catch(() => {})
      },
      // 属性预设值
      presetValue () {
        if (this.ruleForm.user === 'tag') {
          this.ruleForm.tagvaluebar = this.ruleForm.presetValuebar
        }
        console.log('8956', this.ruleForm.presetValuebar)
      },
      // 设置音效
      expiregChange () {
        if (this.ruleForm.tent === 'yy') {
         this.ruleForm.soundeffects = 'default'
        } else {
          this.ruleForm.soundeffects = this.ruleForm.cehold
        }
      },
     // ios的静默通知开关1
      paramsoneChang () {
      if (this.ruleForm.paramsone === true) {
         this.ruleForm.showparamsbar = false
         this.ruleForm.paramstwo = false
         this.ruleForm.contvailable = 1
      } else {
        this.ruleForm.showparamsbar = true
        this.ruleForm.contvailable = ''
      }
      },
      // ios的静默通知开关2
      paramstwoChang () {
      if (this.ruleForm.paramstwo === true) {
         this.ruleForm.showparamstiper = false
         this.ruleForm.paramsone = false
      } else {
        this.ruleForm.showparamstiper = true
      }
      },
      // 多设备推送
      // tokenlistChange () {
      //     console.log('1525', this.ruleForm.usertokenList)
      //     let usertokenbar = this.ruleForm.usertokenList.replace(/\s+/g, '')
      //     console.log('2526', usertokenbar)
      //     let strs = usertokenbar.split(',')
      //     console.log('66666', strs)
      //     if (strs.length === 1) {
      //        this.$message({
      //         message: '只接受多个设备号用英文 “,” 间隔',
      //         type: 'error'
      //       })
      //     return
      //     }
      //     this.ruleForm.usertokenListbar = strs
      // },
      // 多账号推送
      accountlistChange () {
          console.log('9868', this.ruleForm.useraccountlList)
          let usertokenbar = this.ruleForm.useraccountlList.replace(/\s+/g, '')
          console.log('620', usertokenbar)
          let strs = usertokenbar.split(',')
           if (strs.length === 1) {
             this.$message({
              message: '只接受多个账号用英文 “,” 间隔',
              type: 'error'
            })
          return
          }
          this.ruleForm.useraccountlListbar = strs
      },
      // 确定推送按钮
      handleChangeOpen () {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            if (this.ruleForm.badge_type !== '1') {
              this.dialogPushVisible = true
            } else {
              let numbercrv = this.ruleForm.value8 % 1
              if (this.ruleForm.value8 <= 0 || numbercrv !== 0) {
                this.$message({
                message: '角标数必须大于0且为整数',
                type: 'error'
                })
                return false
              } else {
                 this.dialogPushVisible = true
              }
            }
          } else {
              return false
            }
        })
      },
      // 声音改变触发
      ringChang (pey) {
        console.log('pey===', pey)
          if (pey === '1') {
            this.ruleForm.showRadio = true
          } else {
             this.ruleForm.showRadio = false
          }
      },
      value8change () {
      this.ruleForm.badge_typebar = this.ruleForm.value8
      },
      // 角标选择触发
      badgetypeChange () {
        if (this.ruleForm.badge_type === '-1') {
          this.ruleForm.badge_typebar = '-1'
        }
        if (this.ruleForm.badge_type === '-2') {
          this.ruleForm.badge_typebar = '-2'
        }
      },
      // 循环的下拉框触发
      targetChang (veg) {
         if (veg === '1') {
           this.ruleForm.selector = '每天一次'
           console.log('this.ruleForm.cyclic_target', this.ruleForm.cyclic_target)
          this.ruleForm.frequency = Math.floor(parseInt(this.ruleForm.differencevalue / 1)) // 循环的次数
          console.log(this.ruleForm.frequency)
         } else {
           this.ruleForm.selector = '每周今天一次'
           this.ruleForm.frequency = Math.floor(parseInt(this.ruleForm.differencevalue / 7)) // 循环的次数
          console.log(this.ruleForm.frequency)
         }
      },
      // 附加参数key触发
      paramsKey (key) {
          console.log('key====', key)
          this.newgory = key
      },
      // 附加参数value触发
      paramsValue (value) {
          console.log('value====', value)
          this.newvalue = value
          // console.log('addParamsArr', this.addParamsArr)
          // for (let i = 0; i < this.addParamsArr.length; i++) {
          //     this.newobj = Object.assign({}, this.addParamsArr[i])
          // }
          this.ruleForm.objcbar = {}
          let keycbar = this.newgory
          let valuecbar = this.newvalue
          this.ruleForm.objcbar[keycbar] = valuecbar
          console.log('630', this.ruleForm.objcbar)
      },
      // 点击打开触发
      mainActivity () {
          console.log('8888', this.ruleForm.open)
          if (this.ruleForm.open === 'ym') {
              this.ruleForm.openreleaseo = 1
          } else if (this.ruleForm.open === 'url') {
            this.ruleForm.openreleaseo = 2
          } else {
            this.ruleForm.openreleaseo = 3
          }
      },
      // 特殊用户触发
      especiallyUser () {
        console.log('8202', this.ruleForm.user)
        switch (this.ruleForm.user) {
                case 'all':
                    this.ruleForm.esyuser = '全部用户'
                    break
                // case 'token':
                //     this.ruleForm.esyuser = '单个Token'
                //     break
                case 'account':
                    this.ruleForm.esyuser = '单个账号'
                    break
                case 'account_list':
                    this.ruleForm.esyuser = '批量账号'
                    break
                case 'tag':
                   this.ruleForm.esyuser = '设备属性'
                    break
                // case 'token_list':
                //    this.ruleForm.esyuser = '设备列表群推'
                //     break
                default:
                    break
            }
      },
      handleConfirm () {
          let date = new Date()
          date.setDate(date.getDate() - 1) // 得到过去一天的时间
          let dateItem = getDateTime(date, 'ss')
          if (this.ruleForm.platform === 'android') {
          this.ruleForm.darancms = {
          audience_type: this.ruleForm.audience_type === 'all' ? 'all' : this.ruleForm.user, // 推送目标
          tag_list: {
              tags: [this.ruleForm.tagvaluebar],
              op: 'AND' // RO是两个或一个AND是两个必须满足和
            },
          platform: this.ruleForm.platform, // 平台类型
          message: { // 消息体
            title: this.ruleForm.title, // 消息标题
            content: this.ruleForm.content, // 消息内容
            xg_media_resources: this.ruleForm.xg_media_resources, // 富媒体
            android: {
              builder_id: 0,
              ring: this.ruleForm.ring,
              ring_raw: this.ruleForm.ring_raw,
              vibrate: this.ruleForm.vibrate,
              lights: this.ruleForm.lights,
              expire_time: Number(this.ruleForm.expire_time) * 60 * 60, // 离线存储时间（转换）
              // multi_pkg: this.ruleForm.multi_pkg,
              custom_content: this.ruleForm.objcbar,
                action: {
            action_type: this.ruleForm.openreleaseo, // 动作类型，1，打开activity或app本身；2，打开浏览器；3，打开Intent
            activity: this.ruleForm.pushdemo,
            aty_attr: {// activity属性，只针对action_type=1的情况
                if: 0, // Intent的Flag属性
                pf: 0 // PendingIntent的Flag属性
            },
            browser: {
                url: this.ruleForm.urlonent, // 仅支持http、https
                confirm: 1 // 是否需要用户确认
            },
            intent: this.ruleForm.comintent // SDK版本需要大于等于3.2.3，然后在客户端的intent配置data标签，并设置scheme属性
        },
              loop_times: this.ruleForm.frequency,
              loop_interval: this.ruleForm.differencevalue
            }
          },
          send_time: this.ruleForm.send_time === 'lj' ? dateItem : this.ruleForm.newdamitimer, // 推送时间（转换）
          account_list: this.ruleForm.user === 'account' ? [this.ruleForm.useraccount] : [this.ruleForm.useraccountlListbar],
          // token_list: this.ruleForm.user === 'token' ? [this.ruleForm.usertoken] : [this.ruleForm.usertokenListbar],
          message_type: 'notify'
        }
         console.log('andriod参数', this.ruleForm.darancms)
      } else {
        this.ruleForm.darancms = {
            platform: this.ruleForm.platform,
            audience_type: this.ruleForm.audience_type === 'all' ? 'all' : this.ruleForm.user, // 推送目标,
            tag_list: {
              tags: [this.ruleForm.tagvaluebar],
              op: 'AND' // RO是两个或一个AND是两个必须满足和
            },
            environment: this.ruleForm.environment,
            message: {
            title: this.ruleForm.title,
            content: this.ruleForm.content,
            xg_media_resources: this.ruleForm.xg_media_resources, // 富媒体
          ios: {
            aps: {
              alert: {
              subtitle: this.ruleForm.subtitle
              },
              badge_type: this.ruleForm.badge_typebar,
              sound: this.ruleForm.soundeffects,
              category: this.ruleForm.expiregory,
              'content-available': this.ruleForm.contvailable
          },
           custom: this.ruleForm.objcbar,
           loop_times: this.ruleForm.frequency,
           loop_interval: this.ruleForm.differencevalue
        }
    },
          send_time: this.ruleForm.send_time === 'lj' ? dateItem : this.ruleForm.newdamitimer, // 推送时间（转换）
          account_list: this.ruleForm.user === 'account' ? [this.ruleForm.useraccount] : [this.ruleForm.useraccountlListbar],
          // token_list: this.ruleForm.user === 'token' ? [this.ruleForm.usertoken] : [this.ruleForm.usertokenListbar],
          message_type: 'notify'
    }
    console.log('ios参数', this.ruleForm.darancms)
  }
        this.pushAppFun(this.ruleForm.darancms)
        this.dialogPushVisible = false
 },
      pushAppFun () {
        let h = {
          Authorization: 'Basic' + ' ' + Base64.encode(this.v3AppKey + ':' + this.v3SecretKey),
          'Content-Type': 'application/json'
        }
          console.log('this.params==', this.ruleForm.darancms)
        ajax.post(api.MOBILE_PUSH_APP, this.ruleForm.darancms, h).then(res => {
          if (res.ret_code === 0 && res.err_msg === '') {
            this.$message({
              message: '推送成功',
              type: 'success'
            })
            nextPage('/home/historicalDetails')
          }
           if (res.err_msg) {
            this.$message.error(res.err_msg)
          }
            }).catch(() => {})
      },
      // 应用数据同步 增、减
      // handleAdd () {
      //   this.addParamsArr.push({key: '', value: ''})
      // },
      // handleSubtract (index) {
      //   this.addParamsArr.splice(index, 1)
      // },
      // 定时日期出发
      dataChoice () {
          this.ruleForm.newtimer = getDateTime(this.ruleForm.timer, 'day')
      },
      // 定时时间选择触发
      TimeChoice () {
        this.ruleForm.newdamitimer = this.ruleForm.newtimer + ' ' + this.ruleForm.value4
      },
      // 循环日期触发
      dataChoiceone () {
        console.log('this.ruleForm.date_area[1]', this.ruleForm.date_area[1])
        this.ruleForm.timerone = getDateTime(this.ruleForm.date_area[0], 'day')
        this.ruleForm.timertwo = getDateTime(this.ruleForm.date_area[1], 'day')
        this.ruleForm.fristonetime = getDateTime(this.ruleForm.date_area[0], 'day')
        console.log('one', this.ruleForm.fristonetime)
        let dateBeged = new Date(this.ruleForm.fristonetime.replace(/-/g, '/')) // replace方法将-转为/
        let dateareats = this.ruleForm.date_area[1]
        let cevalue = dateareats.getTime() - dateBeged.getTime()
        this.ruleForm.differencevalue = parseInt(cevalue / (1000 * 60 * 60 * 24)) // 两个日期的时间差
        console.log('this.ruleForm.differencevalue', this.ruleForm.differencevalue)
      },
      // 循环时间触发
      cyclictime () {
          this.ruleForm.newdamitimer = this.ruleForm.fristonetime + ' ' + this.ruleForm.cyclic_time
          console.log('ruleForm.cyclic_time', this.ruleForm.newdamitimer)
      }
    },
    created () {
      this.$nextTick(() => {
        this.height = this.$refs.notificatio.offsetHeight - 60 + 'px'
      })
      if (this.v3platform === 'ios') {
        this.optionsone = [{label: 'ios系统版本', value: 'ad'}, {label: 'app版本', value: 'appba'}, {label: '系统语言', value: 'xtong'}, {label: '自定义标签', value: 'bqdy'}]
      } else {
        this.optionsone = [{label: 'android系统版本', value: 'ad'}, {label: 'app版本', value: 'appba'}, {label: '系统语言', value: 'xtong'}, {label: '自定义标签', value: 'bqdy'}]
      }
      this.ruleForm.title = this.v3AppTitle
      this.ruleForm.platform = this.v3platform
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  #notificatio-bar-message
    height 100%
    background #f5f5f5
    overflow hidden
    .title
      height 60px
      padding 15px
      line-height 30px
      font-size 18px
      font-weight normal
      background #fff
    .content_wrap
      overflow auto
      .box-card
        margin-bottom 10px
      .imagebox
        position relative
        width 260px
        overflow hidden
        word-wrap break-word
        text-overflow ellipsis
        .textandroid
          position absolute
          top 140px
          left 70px
          color #ffff
          font-size 15px
        .textios
          position absolute
          top 165px
          left 70px
          color #ffff
          font-size 12px
        .image
          img
            width 260px
            height 320px
        .h2
          font-size 18px
          font-weight normal
        .content
          background #fff
          .upload-demo
            display inline-block
          .params-input
            width 260px
          i.iconfont
            font-size 14px
            margin-right 10px
            color #D8DCE5
          i.iconfont:hover
            color #016DFB
          .i-span
            margin-left 8px
    .el-input
      max-width 500px
    .el-dialog
      .el-main
        .el-row
          height 36px
          line-height 36px
</style>
